<template>
    <el-form label-width="auto">
        <ElRow :gutter="10">
            <ElCol v-for="item in option" :span="item.span ? item.span : 24">
                <el-form-item :label="item.label">
                    <template v-if="item.component.toLowerCase() === 'select'">
                        <el-select v-model="formField[item.field]" placeholder="请选择" clearable>
                            <el-option v-for="i in item.componentProps.options" :key="i.value" :label="i.label"
                                :value="i.value"></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="item.component.toLowerCase() === 'autocomplete'">
                        <ElAutocomplete v-model="formField[item.field]"
                            :fetch-suggestions="item.componentProps.searchApi" placeholder="请输入"></ElAutocomplete>
                    </template>
                    <!-- cascader -->
                    <template v-else-if="item.component.toLowerCase() === 'cascader'">
                        <ElCascader v-model="formField[item.field]" :options="item.componentProps.options"
                            placeholder="请输入"></ElCascader>
                    </template>
                    <template v-else>
                        <el-input v-model="formField[item.field]" placeholder="请输入"></el-input>
                    </template>
                    <!-- <component v-model="formField[item.field]" :is="getFormType(item.component)"></component> -->
                </el-form-item>
            </ElCol>
        </ElRow>
    </el-form>
</template>
<script setup>
import { defineProps, ref, watch, defineEmits } from 'vue';
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRow, ElCol, ElAutocomplete, ElCascader } from 'element-plus';
const emit = defineEmits(['model'])
const props = defineProps({
    option: {
        type: Array,
        default: () => [],
    },
});
const formField = ref({})
const getFormType = (type) => {
    // 将接收的字符串 转换成小写
    type = type.toLowerCase();
    switch (type) {
        case 'input':
            return 'ElInput';
        case 'select':
            return 'ElSelect';
        default:
            return 'ElInput';
    }
};

watch(() => props.option.length, () => {
    console.log('props', props);
    for (let i = 0; i < props.option.length; i++) {
        formField.value[props.option[i].field] = props.option[i].value ? props.option[i].value : '';
    }
}, {
    immediate: true
});

const form = {};
watch(() => formField.value, () => {
    console.log('formField', formField.value);
    emit('model', formField.value);
}, {
    deep: true
});

</script>